<template>
    <div class="my_editor" id="mtEditor">
        <div class="editor_header">
            <el-button type="text" @click="clickType('formatBlock', '<H1>')">H1</el-button>
            <el-button type="text" @click="clickType('formatBlock', '<H3>')">H3</el-button>
            <el-button type="text" @click="clickType('formatBlock', '<H5>')">H5</el-button>
            <el-button type="text" @click="clickType('formatBlock', '<P>')">正文</el-button>
            <el-button @click="clickType('bold', null)" type="text">加粗</el-button>
            <el-button @click="clickType('fontSize', '1')" type="text">字号1</el-button>
            <el-button @click="clickType('fontSize', '3')" type="text">字号3</el-button>
            <el-button @click="clickType('fontSize', '7')" type="text">字号7</el-button>
            <el-button @click="clickType('italic', null)" type="text">斜体</el-button>
            <el-button @click="clickType('createLink', null, '请输入链接')" type="text">链接</el-button>
            <el-button @click="clickType('backColor', null, '请输入背景色')" type="text">背景色</el-button>
            <el-button @click="clickType('foreColor', null, '请输入字体颜色')" type="text">字体颜色</el-button>
            <el-button @click="clickType('indent', null)" type="text">缩进</el-button>
            <el-button @click="clickType('outdent', null)" type="text">取消缩进</el-button>
            <el-button @click="clickType('insertHorizontalRule', null)" type="text">水平线</el-button>
            <el-button @click="clickType('underline', null)" type="text">下划线</el-button>
            <el-button @click="clickType('strikeThrough', null)" type="text">删除线</el-button>
            <el-button @click="clickType('insertHTML', null, '插入的HTML片段')" type="text">HTML</el-button>
            <el-button @click="clickType('insertImage', null, '插入的图片链接')" type="text">图片</el-button>
            <el-button @click="clickType('insertText', null, '插入的内容')" type="text">内容</el-button>
            <el-button @click="clickType('justifyCenter', null)" type="text">居中</el-button>
            <el-button @click="clickType('justifyLeft', null)" type="text">居左</el-button>
            <el-button @click="clickType('justifyRight', null)" type="text">居右</el-button>
            <el-button @click="clickType('subscript', null)" type="text">下角标</el-button>
            <el-button @click="clickType('superscript', null)" type="text">上角标</el-button>
            <el-button @click="clickType('insertOrderedList', null)" type="text">有序列表</el-button>
            <el-button @click="clickType('insertUnorderedList', null)" type="text">无序列表</el-button>
        </div>
        <div class="editor_main" contenteditable="true" id="editor_main"></div>
    </div>
</template>

<script>
export default {
    name: 'myeditor',
    data: () => ({
    }),
    mounted () {
        
    },
    methods: {
        clickType (name, value, other) {
            if (other) {
                let url = window.prompt(other)
                if(url) {
                    this.clickType(name, url)
                }
            } else {
                console.log(name, value)
                let flag = document.execCommand(name, false, value)
                console.log(flag)
            }
        }
    }
}
</script>

<style scoped lang="less">
    .color9{
        color: #999;
    }
    .border_b{
        border-bottom: 1px solid #ddd;
    }
    .center{
        text-align: center;
    }
    .set_t{
        cursor: pointer;
        line-height: 24px;
    }
    .my_editor{
        width: 800px;
        margin: 0 auto;
        .el-button+.el-button{
            margin-left: 0;
        }
    }
    .editor_header{
        background-color: #f1f1f1;
        border: 1px solid #ccc;
        padding: 0 10px;
    }
    .editor_main{
        width: 800px;
        height: 400px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #ccc;
        border-top: none;
        outline: none;
        padding: 10px;
    }
</style>